<template>
  <div class="app-container">
    <el-dialog title="评估详情" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div class="pain-container" v-loading="loading">
        <el-descriptions class="margin-top" title="患者基本信息" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              姓名
            </template>
            {{ evaluationInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ evaluationInfo.phoneNumber }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-postcard"></i>
              身份证号
            </template>
            {{ evaluationInfo.idNumber }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-rank"></i>
              关节侧别
            </template>
            <dict-tag :options="dict.type.patient_info_body_side" :value="evaluationInfo.bodySide" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              现居住地
            </template>
            {{ evaluationInfo.address }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 疼痛性质 -->
      <div class="pain-container">
        <el-descriptions class="margin-top" title="疼痛性质 [ VAS评分（0-10分）]" :column="4" border>
          <el-descriptions-item>
            <template slot="label">静息痛</template>
            {{ evaluationInfo.restPain }}分
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">运动痛</template>
            {{ evaluationInfo.movePain }}分
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">天气变化时疼痛</template>
            {{ evaluationInfo.weatherPain }}分
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">关节畏寒</template>
            {{ evaluationInfo.jointCold }}分
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 炎症 -->
      <div class="pain-container">
        <el-descriptions class="margin-top" title="炎症 [ VAS评分（0-10分）]" :column="3" border>
          <el-descriptions-item>
            <template slot="label">关节肿胀程度</template>
            {{ evaluationInfo.jointSwell }}分
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">局部皮温</template>
            {{ evaluationInfo.skinTemperature }}分
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">晨僵时间</template>
            {{ evaluationInfo.morningStiffnessTime }}分
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 功能 -->
      <div class="pain-container">
        <el-descriptions class="margin-top" title="功能 [ VAS评分（0-10分）]" :column="3" border>
          <el-descriptions-item>
            <template slot="label">蹲起</template>
            {{ evaluationInfo.squating }}分
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">上下楼梯</template>
            {{ evaluationInfo.climbingStairs }}分
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">一次性站立时间</template>
            {{ evaluationInfo.standingTime }}分
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">一次性步行距离</template>
            {{ evaluationInfo.walkingDistance }}分
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">需要助行器械</template>
            {{ evaluationInfo.walkingAids }}分
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">做家务</template>
            {{ evaluationInfo.doingChores }}分
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="pain-container">
        <el-descriptions class="margin-top" title="其他 [ VAS评分（0-10分）]" :column="3" border>
          <el-descriptions-item>
            <template slot="label">膝关节上10cm大腿周径</template>
            {{ evaluationInfo.thighCircu }}cm
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">膝关节活动度</template>
            {{ evaluationInfo.kneeMotion }}分
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">膝关节ROM测试</template>
            {{ evaluationInfo.jointTesting }}分
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">内侧胫股关节间隙压痛</template>
            <dict-tag
              :options="dict.type.patient_evaluation_exit"
              :value="evaluationInfo.medialTibia"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">外侧胫股关节间隙压痛</template>
            <dict-tag
              :options="dict.type.patient_evaluation_exit"
              :value="evaluationInfo.medicalFibula"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">麦氏征</template>
            <dict-tag
              :options="dict.type.patient_evaluation_yin_yang"
              :value="evaluationInfo.maishiSymptoms"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">过伸实验</template>
            <dict-tag
              :options="dict.type.patient_evaluation_yin_yang"
              :value="evaluationInfo.overbendingTest"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">过屈试验</template>
            <dict-tag
              :options="dict.type.patient_evaluation_yin_yang"
              :value="evaluationInfo.hyperextensionTest"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">Beighton评分</template>
            {{ evaluationInfo.beightonScore }}分
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detailEvaluation } from "@/api/gonitis/evaluation";
export default {
  name: "EvaluationDetail",
  dicts: [
    "patient_info_body_side",
    "patient_evaluation_exit",
    "patient_evaluation_yin_yang"
  ],
  data() {
    return {
      loading: false,
      dialogVisible: false,
      evaluationInfo: {}
    };
  },
  methods: {
    /** 处理对话框关闭逻辑 */
    handleClose() {
      this.dialogVisible = false;
      this.$parent.evaluationVisible = false;
    },
    /** 打开对话框,初始化 */
    init(value) {
      this.dialogVisible = true;
      this.loading = true;
      detailEvaluation(value).then(response => {
        this.evaluationInfo = response.data;
        this.loading = false;
      });
    }
  }
};
</script>
<style scoped>
.pain-container {
  margin-top: 20px;
}
</style>